<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectBiFactory.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectBiFranceCustomer.js">
        </script>
        <script type="text/javascript" src="../../scripts/imageViewer.js"></script>
        <script type="text/javascript">
            var aoMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessoryothers');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
            
            var ctAccessoryTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtAccessoryType');
            var ctApplicationTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtApplicationType');
            var ctMaterialTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtMaterialType');
            var ctCareLabelMaterialXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtCareLabelMaterial');
            var ctSupplyTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtSupplyType');
            var ctUnitXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtUnit');
            var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
            var customerXmlLoader = new xmlLoader('../../servlet/BiFranceCustomerServlet?action=5');
            var factoryXmlLoader = new xmlLoader('../../servlet/BiFactoryServlet?action=5');
            
            var ctAccessoryTypeStore;
            var ctApplicationTypeStore;
            var ctMaterialTypeStore;
            var ctCareLabelMaterialStore;
            var ctSupplyTypeStore;
            var ctUnitStore;
            var ctYesnoStore;
            var customerStore;
            var factoryStore;
            
            var ctAccessoryTypeCombo;
            var ctApplicationTypeCombo;
            var ctMaterialTypeCombo;
            var ctSupplyTypeCombo;
            var ctUnitCombo;
            var ctCareLabelMaterialCombo1;
            var ctCareLabelMaterialCombo2;
            var ctCareLabelMaterialCombo3;
            var ctCareLabelMaterialCombo4;
            var ctCareLabelMaterialCombo5;
            var isApplicationCombo;
            var isSpecialCombo;

            var selectedFactory;
            
            var selectFactoryCallback = function(factoryId, factoryName){
                document.getElementById('factoryId').value = factoryId;
                document.getElementById('factoryNameCN').value = selectedFactory.nameCN;
                document.getElementById('factoryNameEN').value = selectedFactory.nameEN;
            }
            
            var selectFranceCustomerCallback = function(customerId, customerName, customerDepartment){
                document.getElementById('customerId').value = customerId;
                document.getElementById('customerName').value = customerName;
                document.getElementById('customerDepartment').value = customerDepartment;
            }
            
            var onIsSpecialSet = function(){
                var ctSupplyType = ctSupplyTypeCombo.getValue();
                if (ctSupplyType == '01') {
                    Ext.getCmp('factoryId').disable();
                    Ext.getCmp('factoryNameCN').disable();
                    Ext.getCmp('factoryNameEN').disable();
                    //Ext.getCmp('factoryReference').disable();
                    //Ext.getCmp('factoryColor').disable();
                    
                    Ext.getCmp('customerId').enable();
                    Ext.getCmp('customerName').enable();
                    Ext.getCmp('customerDepartment').enable();
                    //Ext.getCmp('customerReference').enable();
                    //Ext.getCmp('customerColor').enable();
                }
                else if(ctSupplyType == '02') {
                    Ext.getCmp('customerId').disable();
                    Ext.getCmp('customerName').disable();
                    Ext.getCmp('customerDepartment').disable();
                    //Ext.getCmp('customerReference').disable();
                    //Ext.getCmp('customerColor').disable();
                    
                    Ext.getCmp('factoryId').enable();
                    Ext.getCmp('factoryNameCN').enable();
                    Ext.getCmp('factoryNameEN').enable();
                    //Ext.getCmp('factoryReference').enable();
                    //Ext.getCmp('factoryColor').enable();
                }else{
                	Ext.getCmp('customerId').disable();
                    Ext.getCmp('customerName').disable();
                    Ext.getCmp('customerDepartment').disable();

                    Ext.getCmp('factoryId').disable();
                    Ext.getCmp('factoryNameCN').disable();
                    Ext.getCmp('factoryNameEN').disable();
                }
            }
            
            
            var onIsApplication = function(){
                if (isApplicationCombo.getValue() == '01') {
                    Ext.getCmp('azSet2').collapse();
					Ext.getCmp('referenceIndex2').disable();
					Ext.getCmp('accessoryReference').disable();
					Ext.getCmp('ctAccessoryType').disable();
                    
                    Ext.getCmp('azSet1').expand();
					Ext.getCmp('referenceIndex1').enable();
					Ext.getCmp('applicationReference').enable();
					Ext.getCmp('ctMaterialType').enable();
					Ext.getCmp('ctApplicationType').enable();
                }
                else {
                    Ext.getCmp('azSet2').expand();
					Ext.getCmp('referenceIndex2').enable();
					Ext.getCmp('accessoryReference').enable();
					Ext.getCmp('ctAccessoryType').enable();
                    
                    Ext.getCmp('azSet1').collapse();
					Ext.getCmp('referenceIndex1').disable();
					Ext.getCmp('applicationReference').disable();
					Ext.getCmp('ctMaterialType').disable();
					Ext.getCmp('ctApplicationType').disable();
                }
            };
            
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                
                var setReference1 = function(){
                    if (ctApplicationTypeCombo.getRawValue() == '') {
                        return;
                    }
                    var maxReferenceIndextXmlLoader = new xmlLoader('../../servlet/BiAccessoryOthersServlet?action=20');
                    var maxIndex = maxReferenceIndextXmlLoader.getValueByTagName('item');
                    document.getElementById('referenceIndex1').value = maxIndex;
                    Ext.getCmp('applicationReference').setValue('A-' + maxIndex);
                }
                
                var setReference2 = function(){
                    if (ctAccessoryTypeCombo.getRawValue() == '') {
                        return;
                    }
                    var maxReferenceIndextXmlLoader = new xmlLoader('../../servlet/BiAccessoryOthersServlet?action=21&ctAccessoryType=' + ctAccessoryTypeCombo.getValue());
                    var maxIndex = maxReferenceIndextXmlLoader.getValueByTagName('item');
                    document.getElementById('referenceIndex2').value = maxIndex;
                    Ext.getCmp('accessoryReference').setValue('F-' + ctAccessoryTypeCombo.getValue() + '-' + maxIndex);
                }
                
                ctAccessoryTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctAccessoryTypeXmlLoader.getXml()
                });
                
                ctApplicationTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctApplicationTypeXmlLoader.getXml()
                });
                
                ctMaterialTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctMaterialTypeXmlLoader.getXml()
                });

                ctCareLabelMaterialStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctCareLabelMaterialXmlLoader.getXml()
                });
                
                ctYesnoStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        // records will have an "Item" tag
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctYesnoXmlLoader.getXml()
                });

                ctSupplyTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        // records will have an "Item" tag
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctSupplyTypeXmlLoader.getXml()
                });

                ctUnitStore =  new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        // records will have an "Item" tag
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctUnitXmlLoader.getXml()
                }); 
                
                customerStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['id', 'name', 'department']),
                    data: customerXmlLoader.getXml()
                });
                
                factoryStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['id', 'name']),
                    data: factoryXmlLoader.getXml()
                });
                
                ctAccessoryTypeCombo = new Ext.form.ComboBox({
                    fieldLabel: aoMessage.get('ui.accessoryothers.type'),
                    id: 'ctAccessoryType',
                    name: 'ctAccessoryType',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctAccessoryTypeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
                    tabIndex: 2,
                    listeners: {
                        select: {
                            fn: function(thisCombo, record, index){
                                setReference2();
                                if(thisCombo.getValue() == '15'){
                                	Ext.getCmp('ctCareLabelMaterial1').enable();
                                	Ext.getCmp('percentage1').enable();
                                	Ext.getCmp('ctCareLabelMaterial2').enable();
                                	Ext.getCmp('percentage2').enable(); 
                                	Ext.getCmp('ctCareLabelMaterial3').enable();
                                	Ext.getCmp('percentage3').enable(); 
                                	Ext.getCmp('ctCareLabelMaterial4').enable();
                                	Ext.getCmp('percentage4').enable(); 
                                	Ext.getCmp('ctCareLabelMaterial5').enable();
                                	Ext.getCmp('percentage5').enable();  
                                	Ext.getCmp('azSet3').expand(); 
                                	
                                	Ext.getCmp('customerReference').disable();
                                	Ext.getCmp('customerColor').disable();
                                }else{
                                	Ext.getCmp('ctCareLabelMaterial1').disable();
                                	Ext.getCmp('percentage1').disable();
                                	Ext.getCmp('ctCareLabelMaterial2').disable();
                                	Ext.getCmp('percentage2').disable();
                                	Ext.getCmp('ctCareLabelMaterial3').disable();
                                	Ext.getCmp('percentage3').disable();
                                	Ext.getCmp('ctCareLabelMaterial4').disable();
                                	Ext.getCmp('percentage4').disable();
                                	Ext.getCmp('ctCareLabelMaterial5').disable();
                                	Ext.getCmp('percentage5').disable();
                                	Ext.getCmp('azSet3').collapse ();
                                	
                                	Ext.getCmp('customerReference').enable();
                                	Ext.getCmp('customerColor').enable();  
                                }
                            }
                        }
                    }
                });
                
                ctApplicationTypeCombo = new Ext.form.ComboBox({
                    fieldLabel: aoMessage.get('ui.accessoryothers.application'),
                    id: 'ctApplicationType',
                    name: 'ctApplicationType',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctApplicationTypeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
                    tabIndex: 2,
                    listeners: {
                        select: {
                            fn: function(thisCombo, record, index){
                                setReference1();
                            }
                        }
                    }
                });

                ctSupplyTypeCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.buyer'),
                    id: 'ctSupplyType',
                    name: 'ctSupplyType',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctSupplyTypeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
                    listeners: {
                        select: {
                            fn: function(thisCombo, record, index){
                                onIsSpecialSet();
                            }
                        }
                    }
                });

                ctUnitCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.unit'),
                    id: 'ctUnit',
                    name: 'ctUnit',
                    value:'01',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctUnitStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                ctMaterialTypeCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.materialtype'),
                    id: 'ctMaterialType',
                    name: 'ctMaterialType',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctMaterialTypeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });

                ctCareLabelMaterialCombo1 = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.materialtype') + '1',
                    id: 'ctCareLabelMaterial1',
                    name: 'ctCareLabelMaterial1',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctCareLabelMaterialStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    disabled: true,
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                ctCareLabelMaterialCombo2 = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.materialtype') + '2',
                    id: 'ctCareLabelMaterial2',
                    name: 'ctCareLabelMaterial2',
                    //allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctCareLabelMaterialStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    disabled: true,
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                ctCareLabelMaterialCombo3 = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.materialtype') + '3',
                    id: 'ctCareLabelMaterial3',
                    name: 'ctCareLabelMaterial3',
                    //allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctCareLabelMaterialStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    disabled: true,
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                ctCareLabelMaterialCombo4 = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.materialtype') + '4',
                    id: 'ctCareLabelMaterial4',
                    name: 'ctCareLabelMaterial4',
                    //allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctCareLabelMaterialStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    disabled: true,
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                ctCareLabelMaterialCombo5 = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.materialtype') + '5',
                    id: 'ctCareLabelMaterial5',
                    name: 'ctCareLabelMaterial5',
                    //allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctCareLabelMaterialStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    disabled: true,
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                isSpecialCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.isspecial'),
                    id: 'isSpecial',
                    name: 'isSpecial',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctYesnoStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
                    listeners: {
                        select: {
                            fn: function(thisCombo, record, index){
                                onIsSpecialSet();
                            }
                        }
                    }
                });
                
                isApplicationCombo = new Ext.form.ComboBox({
                    fieldLabel: aoMessage.get('ui.accessoryothers.isapplication'),
                    id: 'isApplication',
                    name: 'isApplication',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctYesnoStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
                    listeners: {
                        select: {
                            fn: function(thisCombo, record, index){
                                onIsApplication();
                            }
                        }
                    }
                });

                var calculatePercentage = function(){
                    
					var percentage1 = Ext.getCmp('percentage1').getValue();
					var percentage2 = Ext.getCmp('percentage2').getValue();
					var percentage3 = Ext.getCmp('percentage3').getValue();
					var percentage4 = Ext.getCmp('percentage4').getValue();
					var percentage5 = Ext.getCmp('percentage5').getValue();

					percentage1 = parseFloat(percentage1==''?0:percentage1);
					percentage2 = parseFloat(percentage2==''?0:percentage2);
					percentage3 = parseFloat(percentage3==''?0:percentage3);
					percentage4 = parseFloat(percentage4==''?0:percentage4);
					percentage5 = parseFloat(percentage5==''?0:percentage5);
					
					if((percentage1 + percentage2 + percentage3 + percentage4 + percentage5) == 100){
						//accessoryOthersForm.getForm().isValid();
						return true;
					}
					return false;
                }
                
                var accessoryOthersForm = new Ext.FormPanel({
                    fileUpload: true,
                    labelAlign: 'left',
                    url: '../../servlet/BiAccessoryOthersServlet?action=1',
                    frame: true,
                    title: aoMessage.get('ui.accessoryothers.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 105,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'photo1Name',
                        mapping: 'photo1Name'
                    }, {
                        name: 'photo2Name',
                        mapping: 'photo2Name'
                    }, {
                        name: 'applicationReference',
                        mapping: 'applicationReference'
                    }, {
                        name: 'referenceIndex1',
                        mapping: 'referenceIndex1'
                    }, {
                        name: 'accessoryReference',
                        mapping: 'accessoryReference'
                    }, {
                        name: 'referenceIndex2',
                        mapping: 'referenceIndex2'
                    }, {
                        name: 'ctAccessoryType',
                        mapping: 'ctAccessoryType'
                    }, {
                        name: 'ctApplicationType',
                        mapping: 'ctApplicationType'
                    }, {
                        name: 'ctSupplyType',
                        mapping: 'ctSupplyType'
                    }, {
                        name: 'ctUnit',
                        mapping: 'ctUnit'
                    },{
                        name: 'isApplication',
                        mapping: 'isApplication'
                    }, {
                        name: 'customerReference',
                        mapping: 'customerReference'
                    }, {
                        name: 'customerColor',
                        mapping: 'customerColor'
                    }, {
                        name: 'factoryReference',
                        mapping: 'factoryReference'
                    }, {
                        name: 'factoryColor',
                        mapping: 'factoryColor'
                    }, {
                        name: 'customerId',
                        mapping: 'customerId'
                    }, {
                        name: 'customerName',
                        mapping: 'customerName'
                    }, {
                        name: 'customerDepartment',
                        mapping: 'customerDepartment'
                    }, {
                        name: 'factoryId',
                        mapping: 'factoryId'
                    }, {
                        name: 'factoryNameCN',
                        mapping: 'factoryNameCN'
                    }, {
                        name: 'factoryNameEN',
                        mapping: 'factoryNameEN'
                    }, {
                        name: 'ctCareLabelMaterial1',
                        mapping: 'ctCareLabelMaterial1'
                    }, {
                        name: 'percentage1',
                        mapping: 'percentage1'
                    }, {
                        name: 'ctCareLabelMaterial2',
                        mapping: 'ctCareLabelMaterial2'
                    }, {
                        name: 'percentage2',
                        mapping: 'percentage2'
                    }, {
                        name: 'ctCareLabelMaterial3',
                        mapping: 'ctCareLabelMaterial3'
                    }, {
                        name: 'percentage3',
                        mapping: 'percentage3'
                    }, {
                        name: 'ctCareLabelMaterial4',
                        mapping: 'ctCareLabelMaterial4'
                    }, {
                        name: 'percentage4',
                        mapping: 'percentage4'
                    }, {
                        name: 'ctCareLabelMaterial5',
                        mapping: 'ctCareLabelMaterial5'
                    }, {
                        name: 'percentage5',
                        mapping: 'percentage5'
                    }, {
                        name: 'descriptionFR',
                        mapping: 'descriptionFR'
                    }, {
                        name: 'descriptionCN',
                        mapping: 'descriptionCN'
                    }, {
                        name: 'descriptionEN',
                        mapping: 'descriptionEN'
                    }]),
                    //reader: msItemXMLReader,
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        id: 'factoryId',
                        name: 'factoryId',
                        xtype: 'hidden'
                    }, {
                        id: 'customerId',
                        name: 'customerId',
                        xtype: 'hidden'
                    }, {
                        id: 'photo1Name',
                        name: 'photo1Name',
                        xtype: 'hidden'
                    }, {
                        id: 'photo2Name',
                        name: 'photo2Name',
                        xtype: 'hidden'
                    }, {
                        id: 'referenceIndex1',
                        name: 'referenceIndex1',
                        xtype: 'hidden'
                    }, {
                        id: 'referenceIndex2',
                        name: 'referenceIndex2',
                        xtype: 'hidden'
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .5,
                            layout: 'form',
                            items: [isApplicationCombo, {
                                id: 'customerName',
                                name: 'customerName',
                                fieldLabel: message.get('message.edit.customername'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                emptyText: message.get('message.combo.pleaseselect'),
                                readOnly: true,
                                maxLength: 64,
                                listeners: {
                                    'render': {
                                        fn: function(){
                                            Ext.getCmp('customerName').getEl().on('click', function(){
                                                selectFranceCustomer(selectFranceCustomerCallback);
                                            }, this);
                                        },
                                        scope: this
                                    }
                                }
                            }, {
                                xtype: 'textfield',
                                fieldLabel: fcMessage.get('ui.francecustomer.department'),
                                id: 'customerDepartment',
                                name: 'customerDepartment',
                                anchor: '86%',
                                allowBlank: true,
                                blankText: message.get('message.edit.noblank'),
                                readOnly: true,
                                maxLength: 64,
                                tabIndex: 1
                            }, {
                                name: 'customerReference',
                                id: 'customerReference',
                                fieldLabel: aoMessage.get('ui.accessoryothers.customerreference'),
                                xtype: 'textfield',
                                anchor: '86%',
                                maxLength: 64
                            }, {
                                name: 'customerColor',
                                id: 'customerColor',
                                fieldLabel: aoMessage.get('ui.accessoryothers.customercolor'),
                                xtype: 'textfield',
                                anchor: '86%',
                                maxLength: 64
                            }]
                        }, {
                            columnWidth: .5,
                            layout: 'form',
                            items: [ctSupplyTypeCombo, {
                                id: 'factoryNameCN',
                                name: 'factoryNameCN',
                                fieldLabel: fMessage.get('ui.factory.name'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                emptyText: message.get('message.combo.pleaseselect'),
                                readOnly: true,
                                maxLength: 128,
                                listeners: {
                                    'render': {
                                        fn: function(){
                                            Ext.getCmp('factoryNameCN').getEl().on('click', function(){
                                                selectFactory(selectFactoryCallback);
                                            }, this);
                                        },
                                        scope: this
                                    }
                                }
                            }, {
                                id: 'factoryNameEN',
                                name: 'factoryNameEN',
                                fieldLabel: '',
                                labelSeparator: '',
                                xtype: 'textfield',
                                anchor: '86%',
                                readOnly: true,
                                maxLength: 128
                            },{
                                html:'<p>&nbsp;</p><br/>'
                            },ctUnitCombo
						/*	
							,{
                                name: 'factoryReference',
                                id: 'factoryReference',
                                fieldLabel: aoMessage.get('ui.accessoryothers.factoryreference'),
                                xtype: 'textfield',
								allowBlank: false,
                                anchor: '86%',
                                //allowBlank: false,
                                //blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }, {
                                name: 'factoryColor',
                                id: 'factoryColor',
                                fieldLabel: aoMessage.get('ui.accessoryothers.factorycolor'),
                                xtype: 'textfield',
								allowBlank: false,
                                anchor: '86%',
                                //allowBlank: false,
                                //blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }*/
							]
                        }]
                    }, {
                        xtype: 'fieldset',
                        collapsible: true,
                        id: 'azSet1',
                        title: aoMessage.get('ui.accessoryothers.set1'),
                        autoHeight: true,
                        items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .5,
                                layout: 'form',
                                items: [ctApplicationTypeCombo, {
                                    xtype: 'textfield',
                                    fieldLabel: aoMessage.get('ui.accessoryothers.reference'),
                                    id: 'applicationReference',
                                    name: 'applicationReference',
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('applicationReference').getEl().on('click', function(){
                                                    setReference1();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }, {
                                columnWidth: .5,
                                layout: 'form',
                                items: [{html: '&nbsp;'}]
                            }]
                        }]
                    }, {
                        xtype: 'fieldset',
                        collapsible: true,
                        id: 'azSet2',
                        title: aoMessage.get('ui.accessoryothers.set2'),
                        autoHeight: true,
                        items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .5,
                                layout: 'form',
                                items: [ctAccessoryTypeCombo]
                            }, {
                                columnWidth: .5,
                                layout: 'form',
                                items: [{
                                    xtype: 'textfield',
                                    fieldLabel: aoMessage.get('ui.accessoryothers.reference'),
                                    id: 'accessoryReference',
                                    name: 'accessoryReference',
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('accessoryReference').getEl().on('click', function(){
                                                    setReference2();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
                            }]
                        }]
                    }, {
                        xtype: 'fieldset',
                        collapsible: true,
                        collapsed: true,
                        id: 'azSet3',
                        title: aoMessage.get('ui.accessoryothers.set3'),
                        autoHeight: true,
                        items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .5,
                                layout: 'form',
                                items: [ctCareLabelMaterialCombo1,ctCareLabelMaterialCombo2,ctCareLabelMaterialCombo3,ctCareLabelMaterialCombo4,ctCareLabelMaterialCombo5]
                            }, {
                                columnWidth: .5,
                                layout: 'form',
                                items: [{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '1&nbsp;(%)',
                                    id: 'percentage1',
                                    name: 'percentage1',
                                    disabled: true,
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1,
                                    validator: function(){
			                        	return calculatePercentage();
									}
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '2&nbsp;(%)',
                                    id: 'percentage2',
                                    name: 'percentage2',
                                    disabled: true,
                                    anchor: '86%',
                                    //allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1,
	                                validator: function(){
    	                                Ext.getCmp('percentage1').validate();
			                        	return calculatePercentage();
									}
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '3&nbsp;(%)',
                                    id: 'percentage3',
                                    name: 'percentage3',
                                    disabled: true,
                                    anchor: '86%',
                                    //allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1,
	                                validator: function(){
                                    	Ext.getCmp('percentage2').validate();
			                        	return calculatePercentage();
									}
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '4&nbsp;(%)',
                                    id: 'percentage4',
                                    name: 'percentage4',
                                    disabled: true,
                                    anchor: '86%',
                                    //allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1,
	                                validator: function(){
                                    	Ext.getCmp('percentage3').validate();
			                        	return calculatePercentage();
									}
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '5&nbsp;(%)',
                                    id: 'percentage5',
                                    name: 'percentage5',
                                    disabled: true,
                                    anchor: '86%',
                                    //allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1,
	                                validator: function(){
                                    	Ext.getCmp('percentage4').validate();
			                        	return calculatePercentage();
									}
                                }]
                            }]
                        }]
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .5,
                            layout: 'form',
                            items: [{
                                xtype: 'fileuploadfield',
                                width: '80%',
                                id: 'photo1',
                                emptyText: message.get('message.edit.selectimage'),
                                fieldLabel: message.get('message.edit.photo') + '1',
                                name: 'photo1',
                                buttonCfg: {
                                    text: '',
                                    iconCls: 'uploadIcon'
                                }
                            }]
                        }, {
                            columnWidth: .5,
                            layout: 'form',
                            items: [{
                                xtype: 'fileuploadfield',
                                width: '80%',
                                id: 'photo2',
                                emptyText: message.get('message.edit.selectimage'),
                                fieldLabel: message.get('message.edit.photo') + '2',
                                name: 'photo2',
                                buttonCfg: {
                                    text: '',
                                    iconCls: 'uploadIcon'
                                }
                            }]
                        }]
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                fieldLabel: message.get('message.edit.descriptionfr'),
                                name: 'descriptionFR',
                                xtype: 'textarea',
                                maxLength: 2048,
                                width: '90%',
                                maxLengthText: message.get('message.edit.toolong')
                            }]
                        }, {
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                fieldLabel: message.get('message.edit.descriptioncn'),
                                name: 'descriptionCN',
                                xtype: 'textarea',
                                maxLength: 2048,
                                width: '90%',
                                maxLengthText: message.get('message.edit.toolong')
                            }]
                        }, {
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                fieldLabel: message.get('message.edit.descriptionen'),
                                name: 'descriptionEN',
                                xtype: 'textarea',
                                maxLength: 2048,
                                width: '90%',
                                maxLengthText: message.get('message.edit.toolong')
                            }]
                        }]
                    }],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (accessoryOthersForm.getForm().isValid()) {
                            
                            	if(idValue == null){
                            		setReference1();
                            		setReference2();
                            	}
                            
                                document.getElementsByName('ctAccessoryType')[0].value = ctAccessoryTypeCombo.getValue();
                                document.getElementsByName('ctApplicationType')[0].value = ctApplicationTypeCombo.getValue();
                                //document.getElementsByName('ctMaterialType')[0].value = ctMaterialTypeCombo.getValue();
                                document.getElementsByName('ctCareLabelMaterial1')[0].value = ctCareLabelMaterialCombo1.getValue();
                                document.getElementsByName('ctCareLabelMaterial2')[0].value = ctCareLabelMaterialCombo2.getValue();
                                document.getElementsByName('ctCareLabelMaterial3')[0].value = ctCareLabelMaterialCombo3.getValue();
                                document.getElementsByName('ctCareLabelMaterial4')[0].value = ctCareLabelMaterialCombo4.getValue();
                                document.getElementsByName('ctCareLabelMaterial5')[0].value = ctCareLabelMaterialCombo5.getValue();
                                //document.getElementsByName('isSpecial')[0].value = isSpecialCombo.getValue();
                                document.getElementsByName('ctSupplyType')[0].value = ctSupplyTypeCombo.getValue();
                                document.getElementsByName('ctUnit')[0].value = ctUnitCombo.getValue();
								document.getElementsByName('isApplication')[0].value = isApplicationCombo.getValue();
                                //document.getElementsByName('customerId2')[0].value = customerCombo2.getValue();
                                
                                accessoryOthersForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        document.getElementById('photo1-file').value = null;
                                        document.getElementById('photo2-file').value = null;
                                        accessoryOthersForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            accessoryOthersForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'accessory_others_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'accessory_others_list.html';
                            }
                        }
                    }]
                });
                
                accessoryOthersForm.render('accessoryOthers');
                
                new Ext.Resizable('customImg', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                new Ext.Resizable('customImg1', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                if (idValue != null) {
                    document.getElementById('id').value = idValue;
                    accessoryOthersForm.getForm().load({
                        url: '../../servlet/BiAccessoryOthersServlet?action=3&id=' + idValue,
                        waitMsg: Ext.LoadMask.prototype.msg,
                        success: function(form, action){
                            document.getElementById('customImg').src = '../../_temp/' + document.getElementById('photo1Name').value;
                            document.getElementById('customImg1').src = '../../_temp/' + document.getElementById('photo2Name').value;
							
							onIsSpecialSet();
							onIsApplication();

							ctAccessoryTypeCombo. fireEvent('select', ctAccessoryTypeCombo);
                            
                        }
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="accessoryOthers">
        </div>
        <img id="customImg" src="../../_temp/noimage.gif" style="position:absolute;left: 20%;width: 250px;" onclick="openImageViewer(this.src);"/><img id="customImg1" src="../../_temp/noimage.gif" style="position:absolute;left: 60%;width: 250px;" onclick="openImageViewer(this.src);"/>
    </body>
</html>